<template>
  <div class="settings-modal" :class="{ visible: isVisible }">
    <div class="modal-content">
      <!-- 这里放你的头像、设置等内容 -->
      <div class="head-icon">
        <van-image
          round
          width="5rem"
          height="5rem"
          src="https://img01.yzcdn.cn/vant/cat.jpeg"
        />
        <span>{{ chname }}</span>
      </div>
      <van-cell title="首页" icon="home-o" @click="ToIndex()" />
      <div v-if="authority === '1'">
      <van-cell title="班级管理" icon="add-o" @click="ToClass()" />
      <van-cell title="课程管理" icon="cluster-o" @click="ToCourse()" />
      <van-cell title="注册用户" icon="notes-o" @click="ToInsert()" />
      <van-cell title="注销用户" icon="delete-o" @click="Tologout()" />
    <van-action-sheet v-model="show" :actions="actions" @select="onSelect" />
    </div>
    <van-button type="danger" class="exit" @click="exit()">退出登录</van-button>
    </div>
  </div>
</template>  
    
  <script>
  import { Toast } from 'vant';
import axios from 'axios';
export default {
  name: "SettingsPage",
  data() {
    return {
      authority: localStorage.getItem('authority'),
      chname : localStorage.getItem('chname'),
      show: false,
      actions: [{ name: '输入注册' }, { name: '文件注册' }],
      // 这里放你的data
    };
  },
  props: {
    isVisible: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    // 监听isVisible的变化，并在变化时添加或移除过渡类
    isVisible(newVal) {
      if (newVal) {
        this.$nextTick(() => {
          // 在DOM更新后添加过渡类
          this.$el.classList.add("show");
          // 在过渡完成后移除过渡类（可选，取决于你的样式设计）
          setTimeout(() => {
            this.$el.classList.remove("show");
          }, 300); // 这里的300是过渡的持续时间，应与CSS中的transition-duration保持一致
        });
      } else {
        // 隐藏时可能需要一个过渡类，但根据你的样式设计，这可能不是必需的
        // 如果需要，你可以添加一个隐藏的过渡类，并在过渡完成后移除它
      }
    },
  },
  mounted() {
    // console.log(this.$store.state.chname+"777");
  },
  methods:{
        onSelect(item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      this.show = false;
      if (item.name === "输入注册") {
        this.$router.push('/Register');
      } else if (item.name === "文件注册") {
        this.InsertStudent();
      }
    },
    ToIndex() {  
      this.$router.push('/Index');  
    },
    ToScoring() {  
      this.$router.push('/Scoring/Main');  
    },
    ToClass() {  
      this.$router.push('/Class');  
    },
    ToList() {  
      this.$router.push('/StudentList');  
    },
    ToCourse() {  
      this.$router.push('/Course');  
    },
    Tologout(){
      this.$router.push('/logout');
    },
    ToInsert() {  
      this.show = true;
    },
    InsertStudent() {  
      const input = document.createElement("input");
        input.type = "file";
        input.enctype = "multipart/form-data";
        input.click();
        input.addEventListener("change", function () {
          // 处理选择文件后的逻辑
          // 创建一个 FormData 对象
          const file = new FormData();
          file.append("file", input.files[0]); // 将文件添加到 file 中
          axios
            .post("/user/importStudentbyex", file, {
              Headers: {
                "Content-Type": "application/octet-stream",
              },
            })
            .then((response) => {
              this.$dialog.confirm({
                title: "注册成功",
                message: "注册成功",
              })
            })
            .catch((error) => {
              console.log(error);
              this.$dialog.confirm({
                title: "注册失败",
                message: "注册失败,请检查文件格式,或者文件中有已注册成员",
              })
            });
        });
    },
    // ToSetting() {  
    //   this.$router.push('/');  
    // },
    exit() {  
      axios.get('/user/loginout').then(res => {
        localStorage.clear();
        this.$router.push('/');  
      })
    },
  }
};
</script>  
    
    <style scoped>
.settings-modal {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 70%; /* 根据你的需要调整宽度 */
  background-color: #eee; /* 你可以设置你想要的背景色 */
  z-index: 999; /* 确保弹窗在顶层 */
  overflow-y: auto; /* 如果内容多的话，允许滚动 */
  transition: transform 0.3s ease; /* 使用transform进行平滑移动 */
  transform: translateX(-100%); /* 初始时将弹窗移到屏幕外 */
}

.settings-modal.visible {
  transform: translateX(0); /* 显示时移动到正确位置 */
}

.head-icon {
  margin-top: 10%;
  margin-left: 10%;
  line-height: 5rem;
}
.exit {
  margin-left: 10%;
  margin-top: 10%;
  width: 80%;
}

/* 其他样式 */
</style>